<template>
  <div class="shops-container">
    <h3 class="title">附近店铺</h3>
    <hr>
    <p>
      <span class="selected">总和排序</span>
      <span>销量</span>
      <span>距离</span>
      <span class="right">筛选&nbsp;<i class="fa fa-balance-scale" aria-hidden="true"></i></span>
    </p>
    <ul>
      <li>减免运费</li>
      <li>高优门店</li>
      <li>叠加红包</li>
      <li>首单优惠</li>
    </ul>

    <jd-shops-item title="山姆会员商店（汇金）"></jd-shops-item>
    <jd-shops-item title="永辉超市-山水文圆店"></jd-shops-item>

  </div>
</template>

<script>
  import JdShopsItem from './JdShopItem.vue'

  export default {
    name: "",
    components: {
      JdShopsItem
    }
  }
</script>

<style lang="scss" scoped>
.shops-container{
  border-radius: 44px;
  padding: 50px 30px 0;
  background-color: #fff;
  .title{
    font-size: 60px;
    margin: 0 0 25px;
  }
  p{
    font-weight: bold;
    font-size: 44px;
    span{
      padding-right: 70px;
      &.selected{
         color: green;
       }
      &.right{
         float: right;
         padding: 0;
        i{
          font-size: 36px;
          vertical-align: center;
        }
       }
    }
  }
  ul{
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    li{
      height: 98px;
      line-height: 98px;
      background-color: #eeeeee;
      text-align: center;
      width: 24%;
      font-size: 40px;
    }
  }
}
</style>
